<template>

    <iframe id="work-process" src="../../../../static/plugins/qunee/work-process-plus.html" :style="siteContentViewHeight" width="100%"></iframe>



</template>

<script>
import {isURL} from '@/utils/validate'

export default {
    data () {
      return {
        cid: null

      }
    },
    // 计算属性用于动态调整iframe的高度
    computed: {
       // 动态设置画布高度
      documentClientHeight: {
        get () { return this.$store.state.common.documentClientHeight }
      },
      siteContentViewHeight () {
        var height = this.documentClientHeight
        if (this.$route.meta.isTab) {
          // height -= 40
          return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
        }
        return { minHeight: height + 'px' }
      }
    },

    mounted () {
      window['deliverAps'] = () => {
      // Qunee页面传送排成模型

        this.getModuleBy_id()
      }

      window['vueDefinedMyProp1'] = (receiveParam1, receiveParam2) => {
        this.updateInfo(receiveParam1, receiveParam2)
      }

      window['getInitData'] = () => {
        // 获取排产模型列表
        // this.getModuleBy_id();

        this.getInitData()
      }

      window['deliverTaskName'] = () => {
        // Qunee页面传送排成模型id、
        console.log('deliverTaskName')
        this.setCapsjson()
      }
    },

    methods: {

      // 取地址后拼接的参数
      setCapsjson () {
        let url = this.decodeUrl(window.location.href)
        let fileUrl = url.substring(url.indexOf('key1=') + 5, url.indexOf('key2=') - 1)

        // 调对应id的html
        document.getElementById('work-process').contentWindow.getTaskName(fileUrl, this.cid)
      },

      getJson (receiveParams) {
        this.$http({
          url: this.$http.adornUrl(receiveParams),
          method: 'get'
        }).then((response) => {
         // alert('请求成功')

         // this.$refs.iframe.contentWindow.onDataCollected(response.data);//这样识别不到contentWindow不知道为啥
          document.getElementById('work-process').contentWindow.onDataCollected(JSON.stringify(response.data))
        })
      },

      // 获取排产模型列表
      getInitData () {
        this.$http({
          url: this.$http.adornUrl('/business/Project3/datamodel/allDataInfo'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            document.getElementById('work-process').contentWindow.initToolbox(data.list)
          }
        })
      },

      // 请求排产模型
      getModuleBy_id () {
        // console.log("读取排程数据方法")
        let url = this.decodeUrl(window.location.href)
     // 从路由中解析出排产的模型id
        let _id = url.substring(url.indexOf('key1=') + 5, url.indexOf('key2=') - 1)
        this.cid = url.substring(url.indexOf('key2=') + 5, url.length)

        this.$http({
          async: false,
          url: this.$http.adornUrl('/business/Project3/getModule/' + _id),
          method: 'get'

        }).then(res => {
          var aps = res.data

          var Aps = this.decodeUrl(JSON.stringify(aps))

        // console.log( Aps)

          document.getElementById('work-process').contentWindow.getQunee(Aps)
        })
      },

      // 给地址转义符转回来
      decodeUrl (url) {
        const codes = [
          {
            key: '%20',
            value: ' '
          },
          {
            key: '%22',
            value: '\'\''
          },
          {
            key: '%23',
            value: '#'
          },
          {
            key: '%25',
            value: '%'
          },
          {
            key: '%26',
            value: '&'
          },
          {
            key: '%28',
            value: '('
          },
          {
            key: '%29',
            value: ')'
          },
          {
            key: '%2B',
            value: '+'
          },
          {
            key: '%2C',
            value: ','
          },
          {
            key: '%2F',
            value: '/'
          },
          {
            key: '%3A',
            value: '_' // 为了正确转换，改成了由':'改成了'_'
          },
          {
            key: '%3B',
            value: ';'
          },
          {
            key: '%3C',
            value: '<'
          },
          {
            key: '%3D',
            value: '='
          },
          {
            key: '%3E',
            value: '>'
          },
          {
            key: '%3F',
            value: '?'
          },
          {
            key: '%40',
            value: '@'
          },
          {
            key: '%5C',
            value: '\\'
          },
          {
            key: '%7C',
            value: '|'
          }
        ]
        for (let item of codes) {
          if (url.includes(item.key)) {
            const targetValue = url.replace(item.key, item.value)
            return this.decodeUrl(targetValue)
          }
        }
        return url
      }

    }
}
</script>

<style scoped>

</style>
